<#include "/common/taglibs.ftl" />
<title>Dialog Demo</title>
<!--begin::Portlet-->
<div class="m-portlet">
    <div class="m-portlet__head">
        <div class="m-portlet__head-caption">
            <div class="m-portlet__head-title">
                <h3 class="m-portlet__head-text">
                    Typeahead Examples
                </h3>
            </div>
        </div>
    </div>

    <!--begin::Form-->
    <form class="m-form m-form--fit m-form--label-align-right">
        <div class="m-portlet__body">
            <div class="form-group m-form__group row">
                <label class="col-form-label col-lg-3 col-sm-12">Basic Demo</label>
                <div class="col-lg-4 col-md-9 col-sm-12">
                    <div class="m-typeahead">
                        <input class="form-control m-input" id="m_typeahead_1" type="text" placeholder="States of USA">
                    </div>
                </div>
            </div>
            <div class="form-group m-form__group row">
                <label class="col-form-label col-lg-3 col-sm-12">Basic Demo</label>
                <div class="col-lg-4 col-md-9 col-sm-12">
                    <div class="m-typeahead">
                        <input class="form-control m-input" id="m_typeahead_2" type="text" placeholder="States of USA">
                    </div>
                </div>
            </div>
        </div>
        <div class="m-portlet__foot m-portlet__foot--fit">
            <div class="m-form__actions m-form__actions">
                <div class="row">
                    <div class="col-lg-9 ml-lg-auto">
                        <button type="reset" class="btn btn-brand">Submit</button>
                        <button type="reset" class="btn btn-secondary">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <a href="http://www.baidu.com" data-toggle="confirmation" data-original-title="确定跳转吗？" data-btn-ok-label="确定" data-btn-cancel-label="取消">GOTO baidu</a>
    <!--end::Form-->
</div>

<!--end::Portlet-->

<page-script>
    <script>
        //https://www.jstree.com/

        var Typeahead = function() {

            var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
                'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
                'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
                'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
                'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
                'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
                'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
                'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
                'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
            ];

            //== Private functions
            var demo1 = function() {
                var substringMatcher = function(strs) {
                    return function findMatches(q, cb) {
                        var matches, substringRegex;

                        // an array that will be populated with substring matches
                        matches = [];

                        // regex used to determine if a string contains the substring `q`
                        substrRegex = new RegExp(q, 'i');

                        // iterate through the pool of strings and for any string that
                        // contains the substring `q`, add it to the `matches` array
                        $.each(strs, function(i, str) {
                            if (substrRegex.test(str)) {
                                matches.push(str);
                            }
                        });

                        cb(matches);
                    };
                };

                /*$('#m_typeahead_1, #m_typeahead_1_modal, #m_typeahead_1_validate, #m_typeahead_2_validate, #m_typeahead_3_validate').typeahead({
                    hint: true,
                    highlight: true,
                    minLength: 1
                }, {
                    name: 'states',
                    source: substringMatcher(states)
                });*/
                /*var states = new Bloodhound({
                    datumTokenizer: Bloodhound.tokenizers.whitespace,
                    queryTokenizer: Bloodhound.tokenizers.whitespace,
                    // `states` is an array of state names defined in "The Basics"
                    local: states
                });*/

                $('#m_typeahead_1').typeahead({
                    minLength: 1,
                    highlight: true
                },
                {
                    name: 'states',
                    source: new Bloodhound({
                        datumTokenizer: Bloodhound.tokenizers.whitespace,
                        queryTokenizer: Bloodhound.tokenizers.whitespace,
                        // `states` is an array of state names defined in "The Basics"
                        local: states
                    })
                });

                $('#m_typeahead_2').typeahead({
                    minLength: 1,
                    hint: false,
                    highlight: true
                },
                {
//                    name: 'states',
                    source: function (query, process, asyncProcess) {
                        return $.ajax({
                            url: '${ctx}/showcase/tree/ajax/autocomplete',
                            type: 'post',
                            data: {term: query},
                            dataType: 'json',
                            success: function (result) {
                                return asyncProcess(result);
                            }
                        });
                    },
                    display: function(suggestion){
                        return '<div data-a="a">'+suggestion+'</div>';
                    },
                    templates: {
//                        notFound: "not found xxx"
                    }
                }).bind('typeahead:change', function (e, value) {
                    console.log('Change: ', e, value);
                }).bind('typeahead:select', function (e, suggestion) {
                    console.log('Selection: ', e, suggestion);
                });


            }

            return {
                // public functions
                init: function() {
                    demo1();
                }
            };
        }();

        jQuery(document).ready(function() {
            Typeahead.init();
        });
    </script>

</page-script>